<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>活动详情</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    #page {
        padding: 20px;
    }

    #top img {
        width: 100%;
    }

    h4,
    h5 {
        margin: 10px auto;
        
    }
     .name{
        color: #0ac5da;
     }
    .msg {
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
    }

    .msg span {
        font-weight: normal;
    }

    .chick_style {
        line-height: 40px;
        color: white;
        background: #d1d1d1;
        margin: 10px auto;
        text-align: center;
        border-radius: 4px;
    }

    .img_style {
        margin-top: 10px;
    }

    .img_style li {
        width: 30px;
        display: inline-block;
        border-radius: 50%;
        height: 30px;
        background: gray;
    }

    .img_style li img {
        width: 30px;
        display: inline-block;
        border-radius: 50%;
        height: 30px;
    }

    .nomal {
        font-size: 14px;
        line-height: 26px;
        color: gray;
    }

    .list_tyle {
        font-size: 14px;
        line-height: 26px;
    }

    .get_style {
        /*display: block;*/
        float: right;
        width: auto;
        margin-left: 10px;
        border: 1px solid #d1d1d1;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: #999;
    }

    #float_view {
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, 0.4);*/
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 666;
    }

    #msg {
        width: 40%;
        position: absolute;
        background: #d1d1d1;
        top: 200px;
        left: 30%;
        border-radius: 8px;
        text-align: center;
        color: red;
        line-height: 50px;
        font-size: 16px;
    }

    input {
        width: 100%;
        height: 25px;
        line-height: 35px;
        border: 1px solid gray;
        margin-top: 10px;
        border-radius: 2px;
    }
 /*评论框*/
    .profile_chat {
            margin-top: 5px;
            padding: 5px;
        }

        /*评论输入框*/
        .btn-textarea {
            height: 50px;
            border: 1px solid #999999;
            width: 90%;
            padding: 5px 5px 5px 10px;
        }

        /*评论按钮*/
        .btn-chat {
            line-height: 25px;
            background: #00c4da;
            padding: 2px 15px;
            border-radius: 5px;
            color: #fff;
            font-size: 14px;
            float: right;
            margin-right: 20px;
        }

        /*评论图标*/
        .btn-chat-icon {
            vertical-align: middle;
            margin-right: 2px;
            height: 18px;
        }
    </style>
</head>

<body>
    <div id="page">
        <div id="float_view">
            <div id="msg" style="color: #fff">
            </div>
        </div>
        <div id="top">
            <img src="../images/jiaoyou.png">
        </div>
        <h4 id="name">520春天的约定</h4>
        <div class="msg">活动地点：<span id="address"></span></div>
        <div class="msg">活动日期：<span id="beginTime"></span></div>
        <div class="msg">活动时间：<span>全天</span></div>
        <div class="msg">报名截止时间：<span id="endTime"></span></div>
        <div class="chick_style">活动已结束</div>
        <h5 id="num_member"></h5>
        <ul class="img_style" id="memImg_list">
        </ul>
        <h4>精彩活动介绍</h4>
        <div id="content"></div>
        <!-- <label class="get_style"></label> -->
        <div class="line_style">
            <div style="border-top:2px solid #999;">
                <div style="position: relative;">
                    <h2 style="margin: 5px;">活动评论</h2>
                    <!-- <div style="vertical-align: middle;height: 50px;position: absolute;top:-5px;right: 10px;">
                        <img style="vertical-align: middle;width: 25px;height: 25px;" src="../images/chat.png" alt="">
                        <span id="speak">我要评论</span>
                    </div> -->
                </div>
                <div class="profile_item">
                    <div class="profile_item-img" style="margin-bottom: 5px;height: 60px;">
                        <img src="../images/a1.jpg" style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;" class="img-responsive" alt="">
                        <div style="margin-left: 60px;">
                            <h5>张女士</h5>
                            <p style="color: #999;font-size: 14px;">如果你不能够简洁的表达你的想法，说明你不够了解他</p>
                        </div>
                    </div>
                    <div class="profile_item-img" style="margin-bottom: 5px;height: 60px;">
                        <img src="../images/a2.jpg" style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;" class="img-responsive" alt="">
                        <div style="margin-left: 60px;">
                            <h5>王先生</h5>
                            <p style="color: #999;font-size: 14px;">只有你想不到，没有你见不到，这次活动太有意义啦！</p>
                        </div>
                    </div>
                    
                </div>
                <!-- <div id="speak_view">
                        <input id="speak_msg" type="" name="" placeholder="评论">
                        <div id="speakSub">提交</div>
                </div> -->
                <div class="profile_chat">
                    
                                        <h4>
                                            <img class="btn-chat-icon" src="../images/h1.png">评论</label>
                                        </h4>
                                        <textarea id='speak_msg' class="btn-textarea" placeholder="输入你的想法。。。。。"></textarea>
                                        <div style="margin-top: 5px;">
                                            <span class="btn-chat" id='speakSub'>提交</span>
                                        </div>
                                        <div style="clear: both"></div>
                </div>

            </div>
        </div>
    </div>
    <script type='text/javascript' src='../js/jquery-2.2.3.min.js'></script>
    <script type="text/javascript">
    var isSpeak = false;
    $("#float_view").hide();
    $("#speak_view").hide();

    function getUrlValue() {
        var res = location.search.toLowerCase();

        var qs = (res.length > 0 ? res.substring(1) : ""),

            args = {},

            items = qs.length ? qs.split("&") : [],
            item = null,
            name = null,
            value = null,
            i = 0,
            len = items.length;

        for (i = 0; i < len; i++) {

            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);
            if (name.length) {
                args[name] = value;
            }

        }
        return args;

    };
    var args = getUrlValue();

    $(function() {
         getComment();
         getMember();
        $.ajax({
            method: "get",
            url: "/activity/getActivityDetail?id=" + args.id,
            success: function(res) {
                console.log(res.data[0])
                $("#top img").attr("src",res.data[0].sharing_photo);
                $("#name").text(res.data[0].title);
                $("#address").text(res.data[0].address);

                $("#beginTime").text(res.data[0].start_time.split("T")[0]);
                $("#endTime").text(res.data[0].end_time.split("T")[0]);

                $("#content").empty().append(res.data[0].description)
            },
            error: function(error) {
                console.log(error)
            }
        })

    })
    $(".chick_style").click(function() {;
        if ($(".chick_style").text()=="点击报名") {
            $.ajax({
            method: "get",
            url: "/activity/registration?actNum=" + args.id + "&id=" + localStorage.getItem('number'),
            success: function(res) {
                if (res.code == 200) {
                    $("#float_view").show();
                    $("#msg").text("报名成功");
                    $(".chick_style").text("已经报名")
                    getMember();

                } else {
                    $("#float_view").show();
                    $("#msg").text("报名失败");

                }
               
            },
            error: function(error) {
                console.log(error)
            }
        }) 
        }else if($(".chick_style").text()=="已经报名"){
         $.ajax({
            method: "get",
            url: "/activity/cancelRegistration?actNum=" + args.id + "&id=" + localStorage.getItem('number'),
            success: function(res) {
                if (res.code == 200) {
                    $("#float_view").show();
                    $("#msg").text("取消活动成功");
                    $(".chick_style").text("点击报名")
                    getMember();

                } else {
                    $("#float_view").show();
                    $("#msg").text("取消活动报名失败");

                }
               
            },
            error: function(error) {
                console.log(error)
            }
        }) 
            
        }
       

    })
    $("#float_view").click(function(event) {
        $("#float_view").hide();
    });
    function getMember(){
        $.ajax({
        method: "get",
        url: "/activity/getRegistrationMember?actNum=" + args.id,
        success: function(res) {
            if (res.code == 200) {
                console.log(res);
                if (res.data) {
                    $("#num_member").text('已经有' + res.data.length + '人报名');
                    var  isTrue=false;
                    var shtml = ''; //memImg_list
                    for (var i = 0; i < res.data.length; i++) {
                        if(res.data[i].mobile== localStorage.getItem('number')){
                            isTrue=true;
                        }
                        shtml += '<li><a href="../groom_profile.html?id=' + res.data[i].id + '"><img src="' + res.data[i].mem_img + '" /></a></li>'
                    }
                    if (isTrue) {
                        $(".chick_style").text('已经报名');
                    }
                    $("#memImg_list").empty().append(shtml);
                } else {
                    $("#num_member").text('暂无人报名')
                }

            } else {
             $("#num_member").text('暂无人报名')
             $("#memImg_list").empty();
            }

        },
        error: function(error) {
            console.log(error)
        }
    }) 
    }
   

    $("#speak").click(function() {
        if (!isSpeak) {
            $("#speak_view").show();
            isSpeak = !isSpeak;
        } else {
            $("#speak_view").hide();
            isSpeak = !isSpeak;
        }

    })
    // $('#speakSub').click(function() {

    //     var json = {
    //         mem_id: localStorage.getItem('number'),
    //         acti_no: args.id,
    //         content: $("#speak_msg").val()
    //     }
    //     $.ajax({
    //         method: "post",
    //         data: json,
    //         url: "/activity/activityComments",
    //         success: function(res) {
    //             $("#float_view").show();
    //             $("#msg").text("已评论,审核中...")
    //             getComment();
    //         },
    //         error: function(error) {
    //             console.log(error)
    //         }
    //     })

    // })
   

    function getComment() {
        $.ajax({
            method: "get",
            url: "/activity/getActivityComments?acti_no=" + args.id,
            success: function(res) {
                if (res.code == 200) {
                    
                    var shtml = '';
                    for (var i = 0; i < res.data.length; i++) {

                        shtml += '<div class="profile_item-img" style="margin-bottom: 5px;height: 60px;">'
                        shtml += '<img src='+res.data[i].mem_img+' style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;border:1px solid gray;" class="img-responsive" alt="">'
                        shtml += '<div style="margin-left: 60px;">'
                        shtml += '<h5 class="name">'+res.data[i].nickname+'</h5>'

                        shtml += '<p style="color: #999;font-size: 14px;">'+res.data[i].content+'</p>'
                        shtml += '</div>'
                        shtml += '</div>'
                    }
                  
                   $(".profile_item").empty().append(shtml);
                }

        
            },
            error: function(error) {
                console.log(error)
            }
        })
    }
    </script>
</body>

</html>